<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>




    <link type="text/css" rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
    <style>

       *{box-sizing: content-box; }
      body {
        margin: 0;
        padding: 0px;
      }
      .demo {
        padding: 20px;
        margin-bottom: 20px;
        background-color: #f7f7f7;
      }

      .customBootstrap .pagination > li > a {
        margin-right: 5px;
        border-radius: 2px;
        background: #fff;
        color: #333;
        border-color: #ccc;
        padding: 6px 15px;
      }
      .customBootstrap .pagination > li > a:hover,
      .customBootstrap .pagination > li > a:focus {
        color: #fff;
        background: #fb9400;
        border-color: #fb9400;
      }
      .customBootstrap .pagination > .active > a,
      .customBootstrap .pagination > .active > a:hover,
      .customBootstrap .pagination > .active > a:focus {
        color: #fff;
        background: #fb9400;
        border-color: #fb9400;
      }
      .customBootstrap .pagination > .disabled > a,
      .customBootstrap .pagination > .disabled > a:hover,
      .customBootstrap .pagination > .disabled > a:focus {
        color: #999;
        background: #fff;
        border-color: #ddd;
        cursor: not-allowed;
      }

      .pagination2 {
        height: 30px;
        margin: 10px 0;
      }
      .pagination2 a {
        text-decoration: none;
        border: solid 1px #c0d3e6;
        color: #333;
        border-left-width: 0;
        height: 24px !important;
      }
      .pagination2 a {
        height: 24px !important;
        display: block;
        float: left;
        padding: 0 10px;
        text-align: center;
        line-height: 24px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
      .pagination2 .active {
        background-color: #6babdd;
        color: #fff;
        padding: 0 10px;
        border: solid 1px #5c95c1;
      }
      .pagination2 .prev {
        border: solid 1px #c0d3e6;
      }
      .pagination2 .next {
        border-left-width: 0;
        border-right-width: 1px;
      }
      .pagination2 .active.prev,
      .pagination2 .active.next {
        color: #dcdcdc;
        border-color: #efefef;
        background: #fff;
      }
      .pagination2 a:hover {
        background-color: #cde4f8;
      }
      .pagination2 .active:hover {
        background-color: #6babdd;
      }
      .pagination2 a.disabled {
        display: none;
      }

      .pagination4 .page a,
      .pagination4 .page a:hover {
        width: 100px;
        text-align: center;
        border: 1px solid #ddd;
        color: #999;
        background-color: #fff !important;
      }
    </style>
   
  

    <link rel="stylesheet" href="/lib/font/iconfont.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/list.css">
    <script src="/lib/jquery/jquery-3.2.1.js"></script>
    <script  src="/lib/jq-paginator/jq-paginator.js"></script>
    <script src="/lib/requirejs/require.min.js" data-main="/js/list"></script>
</head>
<body>





     <div class="sider-left"></div>
     <div class="header"></div>
     <div class="other">

      <div class="header-wrap">
        <div></div>
        <div>
            <input class="sea_input" type="text" value="" name="content" id="textfield" placeholder="请输入商品或品牌"> 
            <button type="submit" class="sea_submit" >搜索</button>
    
            
            <div id="search_result_search_fm" class="suggest" >
             </div>
    
    
            <ul><li>热搜榜：</li><li><a href="#">悦诗风吟</a></li><li><a href="#">面霜</a></li><li><a href="#">兰芝</a></li><li><a href="#">面膜</a></li><li><a href="#">化妆水</a></li><li><a href="#">唇膏/口红</a></li><li><a href="/htm/cart.html">BB霜</a></li></ul>
        </div>
        <div class="head_cart" id="header_cart">
          <a class="tit" href="/html/cart.html"><i class="iconfont icon-gouwuche" ></i>购物车<i class="iconfont icon-arrow" ></i></a>
          
          </div>
    </div>
    
    
    
    <div class="he-nav">
     <div class="he-nav-bd">
       <p class="qqqqq"> <a href="/index.html">全部商品分类</a></p>
         
          <div class="main_cate_l" id="main_cate_l">
              <ul>
              <li data-index="0">
              <h3><a href="javascript:;">护肤</a></h3>
              <div class="bd">
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
            <a href="/html/list.html">面膜</a>
              </div>
              </li>
              <li data-index="1">
              <h3><a href="javascript:;">彩妆</a></h3>
              <div class="bd">
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              <a href="/html/list.html">BB霜</a>
              </div>
              </li>
              </ul>
              <ul class="other">
              <li data-index="2">
              <h3><a href="javascript:;">日化清洁</a></h3>
              <div class="bd">
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
              </div>
              </li>
              <li data-index="3">
              <h3><a href="javascript:;">健康保养</a></h3>
              <div class="bd">
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
                  <a href="/html/list.html">日常护理</a>
              </div>
              </li>
              <li data-index="4">
              <h3><a href="javascript:;">化妆工具</a></h3>
              <div class="bd">
              <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af1e">化妆刷</a>
              <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af20">化妆棉</a>
              <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af1f">粉扑/洁面扑</a>
              </div>
              </li>
              </ul>
              </div>
      
        <a href="/html/list.html">60秒闪购</a>
        <a href="/html/list.html">手机丽子</a>
     </div>
    </div>
      
     </div>
    
    
     <div class="wrap">
        <!--头部-->
        
        <!--导航-->
        <div class="nav"></div>

        <!--content-->
        <div class="content">
            <div class="list-box">
                <div class="list-nav">
                    <a href="/">首页</a>
                    <span>&gt;</span>
                    <a href="/">全部</a>
                    <span>&gt;</span>
                    <a href="/">化妆水</a>
                    <!--<span>&gt;</span>-->
                </div>


                <div class="list-menu">
                    <dl>
                        <dt>分类：</dt>
                        <dd>
                            <ul>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>功效：</dt>
                        <dd>
                             <ul>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                            </ul>
                        </dd>
                    </dl><dl>
                        <dt>品牌：</dt>
                        <dd>
                             <ul>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                            </ul>
                        </dd>
                    </dl><dl>
                        <dt>价格：</dt>
                        <dd>
                             <ul>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                                <li><a href="#">化妆</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>

                

                <div class="list-tag">
                    <ul>
                        <li  id="xiaoliang"><a href="javascript:void(0)">销量</a><span class="">
                                <i class="iconfont icon-een"></i>
                        </span></li>
                        <li class="now id"><a href="javascript:void(0)">ID排序</a><span></span></li>
                        
                        <li id="priceup"><a href="javascript:void(0)">价格升序</a><span></span></li>
                        <li id="pricedown"><a href="javascript:void(0)">价格降序</a><span></span></li>
                    </ul>
                </div>



                <div class="list-main">
                    <ul class="list-pro">
                        <li>
                            <a href="/html/detail.html">
                                <img src="/img/1d483fe406171.jpg" alt="">
                                <p class="txt">法国Caudalie欧缇丽（泰奥菲）大葡萄籽水活性喷雾200ml 轻透补水抗辐射</p> 
                            </a>
                            <p class="cle">
                                <span class="orange fl">¥85.00</span>
                                <span class="fr">已售458件</span>
                            </p>
                        </li>
                        
                    </ul>
                </div>
<!-- 加入分页功能包裹list-main -->
                <div class="demo customBootstrap">
                    <p>当前第 <span id="demo2-text"></span> 页</p>
                    <ul id="demo2" class="pagination"></ul>
                  </div>


            </div>
        </div>
        <!--尾部-->
        <footer></footer>
       
    </div>
    <script type="text/html" id="list-template">
        <!--{{each products item }}
            <li>
                <div class="pro-id">{{item .id}}</div>
                <a href="#">
                    <img src="{{item .img}}" alt="">
                    <div class="title-box">
                        <p class="title">{{item .title}}</p>              
                        <p class="cle">
                            <span>￥<strong>{{item .price}}</strong></span>
                            <span>
                                <i class="iconfont icon-huo"></i>
                                <em>{{item .hot}}</em>
                            </span>
                        </p>
                    </div>
                </a>
            </li>
        {{/each}}-->
        
       
        {{each products item index}}
        

            <li class="yi" data-id="{{item.id}}">
                <div class="pro-id"  >{{item.id}}</div>
                <a class="det" href="/html/detail.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="">
                    <p class="text">{{item.title}}</p> 
                </a>
                <p class="cle">
                        ¥<span class="orange fl price">{{item.price}}.00</span>
                    <span class="fr">已售{{item.hot}}件</span>
                </p>
                <button class="add_cart" style="float:left; margin-left:10px; width: 177px;;height:60px;">加入购物车</button>
            </li>    
        {{/each}}
    </script>
   

    <script>
   var n;
        $("#demo2").jqPaginator({
          totalPages: 50,
          visiblePages: 9,
          currentPage: 1,
          first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
          prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
          next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
          last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
          page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
          onPageChange: function(n) {
            AAA(n)
            $("#demo2-text").html(n);
            
           
          }
        })
        function AAA (curt){
         console.log(curt)
        }
       
        </script>
</body>
</html>